<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      
    >
      <el-form-item label="站点名称" prop="stationName">
        <!-- <el-col :span="20"> -->
        <el-input
          v-model="queryParams.stationName"
          placeholder="请输入站点名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
        <!-- </el-col> -->
      </el-form-item>
      <el-form-item label="站点类型" prop="stationType">
        <!-- <el-col :span="20"> -->
        <el-select
          v-model="queryParams.stationType"
          placeholder="请选择站点类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <!-- </el-col> -->
      </el-form-item>
      <el-form-item label="供电公司" prop="area">
        <!-- <el-col :span="20"> -->
        <el-select
          v-model="queryParams.area"
          placeholder="请选择供电公司"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in areaOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <!-- </el-col> -->
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button> -->
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:station:add']"
        >
          新增
        </el-button>
      </el-col>
       <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >
          导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:station:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-row :gutter="20" class="mb10">
      <el-col>
        <div class="colStyle">
          <div class="resNum">查询结果：({{ total }}条)</div>
          <div
            v-for="(item, index) in searchFormOptions"
            :key="index"
            class="searchBox"
          >
            <div class="text">
              {{ item.tableName }}：{{ item.conditionName }}{{ item.textVal }}
            </div>
            <div class="icon" @click="removeSearch(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
          <el-button
            type="warning"
            round
            size="mini"
            class="ml10 h28"
            @click="cleanAllSearch"
          >
            清除条件
          </el-button>
          <el-button
            type="primary"
            round
            size="mini"
            class="h28"
            icon="el-icon-plus"
            @click="openAddModel"
          >
            追加条件
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb10 mt20" v-if="addShow">
      <el-col :span="4">
        <el-select
        v-model="searchOptions.fieldName"
          placeholder="请选择追加字段"
          clearable
          size="small"
          @change="changeCondition"
        >
          <el-option
            v-for="dict in fieldNameOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName">
        <el-select
          v-model="searchOptions.condition"
          placeholder="请选择条件"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in conditionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='string'">
        <el-input
          v-model="searchOptions.val"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='num'">
        <el-input
          v-model="searchOptions.val"
          type='tel' pattern='\d*'
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='select'">
        <el-select
          v-model="searchOptions.val"
          placeholder="请选择条件的值"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in selectValueOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addSearch"
        >
          追加
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" size="small" @click="closeAddModel">
          取消
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="stationList" @sort-change="tableSortChg" @row-click="toClick">
      <el-table-column label="#" align="center" prop="id" width="95">
        <template slot-scope="scope">
          <span>
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="站点名称" align="center" sortable="custom" prop="stationName" width="220">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link font-blue" @click.stop="stopC($event)">
              {{scope.row.stationName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled v-if="!scope.row.smachineRooms.length">暂无数据</el-dropdown-item>
              <el-dropdown-item v-for="dropItem, index in scope.row.smachineRooms" :key="index" :command="dropItem">{{dropItem.machineRoomName}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        label="站点类型"
        :formatter="statusFormat"
        align="center"
        prop="stationName"
        min-width
      />
      <el-table-column label="联系电话" align="center" prop="tel" />
      <el-table-column
        label="供电公司"
        :formatter="areaFormat"
        align="center"
        prop="area"
        min-width
      />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width
      >
        <template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:station:query']"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改站点对话框 -->
    <el-dialog :title="title" :visible.sync="open" :width="getDialogWidth()" append-to-body>
      <el-form
        ref="form"
        :size="'medium'"
        :model="form"
        :rules="rules"
        label-width="125px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="站点名称" prop="stationName">
              <el-input
                v-model="form.stationName"
                placeholder="请输入站点名称"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点类型" prop="stationType">
              <el-select
                v-model="form.stationType"
                placeholder="请选择站点类型"
                clearable
              >
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="电压等级" prop="kv">
              <el-select
                v-model="form.kv"
                placeholder="请选择电压等级"
                clearable
              >
                <el-option
                  v-for="dict in KVOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供电公司" prop="area">
              <el-select
                v-model="form.area"
                placeholder="请选择供电公司"
                clearable
              >
                <el-option
                  v-for="dict in areaOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="tel">
              <el-input
                v-model="form.tel"
                placeholder="请输入联系电话"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="光缆出口数量" prop="opticalOutNum">
              <el-input-number
                v-model="form.opticalOutNum"
                placeholder="请输入"
                suffix-icon="xxx"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="经纬度" prop="longitude">
              <el-input
                v-model="form.longitude"
                placeholder="请输入经度"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="ml10">
            <el-form-item label-width="0" prop="latitude">
              <el-input
                v-model="form.latitude"
                placeholder="请输入纬度"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="ml20">
            <el-button
              type="primary"
              icon="el-icon-location"
              @click="openSelectPoint"
            >
              获取定位
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产权单位" prop="propertyUnit">
              <el-input
                v-model="form.propertyUnit"
                placeholder="请输入产权单位"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          plain
          @click="handleDelete"
          v-if="title == '修改站点'"
          v-hasPermi="['system:station:remove']"
        >
          删 除
        </el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" style="width: 120px;">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 站点导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备属性数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color: red;" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="info" style="font-size: 12px;" @click="importTemplate">
            下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="选择坐标"
      :with-header="false"
      :visible.sync="drawer"
      direction="btt"
      :destroy-on-close="true"
      :show-close="false"
      size="50%"
    >
      <div class="drawer-content">
        <div class="drawerBaiduMap" id="drawerMap"></div>
        <img class="centerMarker" src="../../assets/images/marker.png" alt="" srcset="">
        <div class="enter"><el-button type="primary" @click="enterGeo">确定</el-button></div>
        <div class="close"><el-button type="info" @click="drawerClose">取消</el-button></div>
      </div>
    </el-drawer>
  </div>
</template>


<script>
import {
  listStation,
  getStation,
  delStation,
  addStation,
  updateStation,
  exportStation,
  importTemplate,
} from '@/api/station/station'
import {getCondition} from '@/api/login'
import { getToken } from '@/utils/auth'
import Vue from 'vue'


export default {
  name: 'Station',
  components: {},
  data() {
    return {
      drawer: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 站点表格数据
      stationList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      statusOptions: [],
      areaOptions: [],
      //调度等级
      levelOptions: [],
      //电压等级
      KVOptions: [],
      //上传速率
      rateOptions: [],
      //下载速率
      bwOptions: [],
      //追加条件的select参数
      fieldNameOptions: [],
      conditionOptions: [],
      selectValueOptions:[],
      //end
      addShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderby: null,
        stationName: null,
        stationType: null,
        area: null
      },
      searchOptions: {
        fieldName: '',
        condition: '',
        val: '',
      },
      searchFormOptions: [],
      // 表单参数
      form: {
        longitude: '',
        latitude: '',
      },
      // 表单校验
      rules: {
        stationName: [
          { required: true, message: '请输入站点名称', trigger: 'change' },
        ],
        stationType: [
          { required: true, message: '请选择站点类型', trigger: 'change' },
        ],
        area: [{ required: true, message: '供电公司', trigger: 'change' }],
        kv: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
        tel: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
        opticalOutNum: [
          { required: true, message: '请输入光缆出口数量', trigger: 'change' },
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'change' },
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'change' },
        ],
        propertyUnit: [
          { required: true, message: '请输入产权单位', trigger: 'change' },
        ],
      },
      // 站点导入参数
      upload: {
        // 是否显示弹出层（站点数据导入）
        open: false,
        // 弹出层标题（站点数据导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/station/importData',
      },
      drawerMap:null,
      selectLngLat:{}
    }
  },
  created() {
    getCondition('station').then(res=>{
      this.fieldNameOptions = res.data
    })
    this.getList()

    this.getDicts('station_type').then((response) => {
      this.statusOptions = response.data
    })
    this.getDicts('area').then((response) => {
      this.areaOptions = response.data
    })
    // this.getDicts('operation').then((response) => {
    //   this.conditionOptions = response.data
    // })
    // this.getDicts('station_condition').then((response) => {
    //   this.fieldNameOptions = response.data
    // })
    this.getDicts('dispatch_level').then((response) => {
      this.levelOptions = response.data
    })
    this.getDicts('KV').then((response) => {
      this.KVOptions = response.data
    })
    this.getDicts('network_rate').then((response) => {
      this.rateOptions = response.data
    })
    this.getDicts('network_bw').then((response) => {
      this.bwOptions = response.data
    })
  },
  activated(){
    getCondition('station').then(res=>{
      this.fieldNameOptions = res.data
    })
    this.getList()
    this.getDicts('station_type').then((response) => {
      this.statusOptions = response.data
    })
    this.getDicts('area').then((response) => {
      this.areaOptions = response.data
    })
    // this.getDicts('operation').then((response) => {
    //   this.conditionOptions = response.data
    // })
    // this.getDicts('station_condition').then((response) => {
    //   this.fieldNameOptions = response.data
    // })
    this.getDicts('dispatch_level').then((response) => {
      this.levelOptions = response.data
    })
    this.getDicts('KV').then((response) => {
      this.KVOptions = response.data
    })
    this.getDicts('network_rate').then((response) => {
      this.rateOptions = response.data
    })
    this.getDicts('network_bw').then((response) => {
      this.bwOptions = response.data
    })
  },
  mounted() {},
  methods: {
    tableSortChg(params) {
      this.queryParams.orderby = params.prop + ' ' + params.order.replace('ending', '')
      this.getList()
    }, 
    changeCondition(e){
      let arr = this.fieldNameOptions.filter(res=>{return res.dictValue == e})
        this.searchOptions.condition = '';
        this.searchOptions.val = '';
        this.searchOptions.fieldName = arr[0].dictValue;
        this.searchOptions.type = arr[0].type
        this.conditionOptions = arr[0].conditon
        this.selectValueOptions = arr[0].selectDict
    },
    handleCommand(item) {
      this.$router.push({ path: `/machineRoom?roomName=${ encodeURIComponent(item.machineRoomName) }&station=${ item.station }` })
    },
    stopC(e){
      if(e && e.stopPropagation){
          e.stopPropagation;
      }else{
          window.event.cancelBubble;
      }
    },
    toClick(row){
      this.handleUpdate(row)
    },
    openSelectPoint() {
      this.drawer = true
      let _this = this
      this.$nextTick(()=>{
        _this.drawerMap = new BMap.Map('drawerMap') // 创建地图实例
        _this.drawerMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        _this.drawerMap.addEventListener( "dragend" , function showInfo(){
            var  cp = _this.drawerMap.getCenter();
            _this.selectLngLat = {
              lng:cp.lng,
              lat:cp.lat
            }
        });
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var point = new BMap.Point(r.point.lng, r.point.lat)
            _this.selectLngLat = {
              lng:r.point.lng,
              lat:r.point.lat
            }
            _this.drawerMap.centerAndZoom(point, 15)
          }
          else {
            alert('failed'+this.getStatus());
          }
        });
      })
    },
    enterGeo(){
      this.$set(this.form, 'longitude', this.selectLngLat.lng)
      this.$set(this.form, 'latitude', this.selectLngLat.lat)
      this.drawerClose()
    },
    drawerClose() {
      this.selectLngLat = {}
      this.drawer = false
    },
    //追加条件操作
    openAddModel() {
      this.addShow = true
    },
    closeAddModel() {
      this.addShow = false
      this.searchOptions.fieldName = ''
      this.searchOptions.condition = ''
      this.searchOptions.val = ''
    },
    removeSearch(i) {
      if (this.queryParams[this.searchFormOptions[i].fieldName]) {
        this.queryParams[this.searchFormOptions[i].fieldName] = ''
      }
      this.searchFormOptions.splice(i, 1)
      this.getList()
    },
    addSearch() {
      if (
        !this.searchOptions.fieldName ||
        !this.searchOptions.condition ||
        !this.searchOptions.val
      ) {
        this.msgError('请填写完整搜索条件')
        return
      }
      let obj = { ...this.searchOptions }
      obj.tableName = this.selectDictLabel(this.fieldNameOptions, obj.fieldName)
      obj.conditionName = this.selectDictLabel(
        this.conditionOptions,
        obj.condition,
      )
      if(this.searchOptions.type=='select'){
        obj.textVal = this.selectDictLabel(this.selectValueOptions, obj.val)
      }else{
        obj.textVal = obj.val
      }
      this.searchFormOptions.push(obj)
      this.closeAddModel()
      this.getList()
    },
    cleanAllSearch() {
      this.searchFormOptions = []
      this.resetQuery()
    },
    //*******
    // 菜单状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.stationType)
    },
    areaFormat(row, column) {
      return this.selectDictLabel(this.areaOptions, row.area)
    },
    /** 查询站点列表 */
    getList() {
      this.loading = true
      let form = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderby: this.queryParams.orderby,
        queryData: [],
      }
      for (let i in this.searchFormOptions) {
        form.queryData.push({
          fieldName: this.searchFormOptions[i].fieldName
            .replace(/([A-Z])/g, '_$1')
            .toLowerCase(),
          condition: this.searchFormOptions[i].condition,
          val: this.searchFormOptions[i].val || '',
        })
      }
      listStation(form).then((response) => {
        this.stationList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        stationName: null,
        stationType: null,
        area: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.searchFormOptions = this.searchFormOptions.filter((res) => {
        return (
          res.fieldName != 'stationName' &&
          res.fieldName != 'stationType' &&
          res.fieldName != 'area'
        )
      })
      if (this.queryParams.stationName) {
        this.searchFormOptions.push({
          fieldName: 'stationName',
          condition: 'like',
          val: this.queryParams.stationName,
          tableName: '站点名称',
          conditionName: '',
          textVal: this.queryParams.stationName,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'stationName'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'stationName') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.stationType) {
        this.searchFormOptions.push({
          fieldName: 'stationType',
          condition: 'eq',
          val: this.queryParams.stationType,
          tableName: '站点类型',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.statusOptions,
            this.queryParams.stationType,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'stationType'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'stationType') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.area) {
        this.searchFormOptions.push({
          fieldName: 'area',
          condition: 'eq',
          val: this.queryParams.area,
          tableName: '供电公司',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.areaOptions,
            this.queryParams.area,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'area'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'area') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加站点'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getStation(id).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改站点'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStation(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addStation(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete() {
      const ids = this.form.id
      this.$confirm(
        '是否删除站点为"' + this.form.stationName + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(function () {
          return delStation(ids)
        })
        .then(() => {
          this.cancel()
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有站点数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportStation(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '站点数据导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg)
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
  },
}
</script>


<style scoped lang="scss">
.drawerBaiduMap {
  width: 100%;
  height: 100%;
}
.drawer-content{
  width: 100%;
  height: 100%;
  position: relative;
}
.centerMarker{
  position: absolute;
  top: calc(50% - 40px) ;
  left: calc(50% - 14px);
}

.enter{
  position: absolute;
  top: 20px;
  right: 20px;
}

.close{
  position: absolute;
  top: 20px;
  left: 20px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
.el-input-number--medium {
  width: 100% !important;
}

</style>
<style scoped lang="scss">
.colStyle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.searchBox {
  min-width: 50px;
  height: 28px;
  margin-top: 6px;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  background: #d7d7d7;
  line-height: 28px;
  margin-left: 6px;
  .text {
    padding-left: 14px;
    padding-right: 7px;
  }
  .icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
    i {
      font-size: 20px;
      color: red;
    }
  }
}

.name {
  display: flex;
  flex-direction: column;
}
.title {
  color: #333;
  font-size: 14px;
}
.detail {
  display: flex;
  color: #7f7f7f;
  font-size: 12px;
}
.ml20 {
  margin-left: 20px;
}
.h28 {
  height: 28px;
  margin-top: 3px;
}
.resNum {
  margin-top: 2px;
  font-size: 14px;
}

</style>
